<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        
        <title>API reference for Kendo UI Drawing API Layout</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/drawing/layout.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/drawing/layout.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendodrawinglayout--kendodrawinggroup">
<a href="#kendodrawinglayout--kendodrawinggroup">kendo.drawing.Layout</a><span class="type-link">Inherits from <a class="type-link" href="/api/javascript/drawing/group">kendo.drawing.Group</a></span>
</h1>

<p>Represents a group that can arrange its children within a rectangle.</p>

<h4>Example - creating a layout</h4>

<pre><code>&lt;div id="surface" style="height: 300px;"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var Path = draw.Path;
  var rect = new Rect([200, 0], [200, 200]);
  var pathRect = new Rect([0, 0], [100, 100]);
  var layout = new draw.Layout(rect);

  var pathA = Path.fromRect(pathRect);
  var pathB = Path.fromRect(pathRect);
  var pathC = Path.fromRect(pathRect);

  layout.append(pathA, pathB, pathC);
  layout.reflow();

  var surface = draw.Surface.create($("#surface"));
  surface.draw(layout);
&lt;/script&gt;
</code></pre>

<h2 id="constructor-parameters"><a href="#constructor-parameters">Constructor Parameters</a></h2>

<h3 id="rect-kendogeometryrect">
<a href="#rect-kendogeometryrect">rect </a><a href="/api/javascript/geometry/rect" class="type-link"><code>kendo.geometry.Rect</code></a>
</h3>

<p>The rectangle within which the children should be arranged.</p>

<h3 id="options-object">
<a href="#options-object">options </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The configuration options of the layout.</p>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-alignContent">
<a href="#configuration-alignContent">alignContent </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "start")</em>
</h3>

<p>Specifies the alignment of the content. The supported values are:</p>

<ul>
<li>
<code>"start"</code> - aligns the content to the rectangle origin.</li>
<li>
<code>"center"</code> - aligns the content to the rectangle center.</li>
<li>
<code>"end"</code> - aligns the content to the rectangle end.</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="surface" style="height: 300px;"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var Path = draw.Path;
  var rect = new Rect([200, 0], [200, 300]);
  var pathRect = new Rect([0, 0], [100, 100]);
  var layout = new draw.Layout(rect, {
        alignContent: "center"
  });

  var pathA = Path.fromRect(pathRect);
  var pathB = Path.fromRect(pathRect);
  var pathC = Path.fromRect(pathRect);

  layout.append(pathA, pathB, pathC);
  layout.reflow();

  var surface = draw.Surface.create($("#surface"));
  surface.draw(layout);
  surface.draw(Path.fromRect(rect));
&lt;/script&gt;
</code></pre>

<h3 id="configuration-alignItems">
<a href="#configuration-alignItems">alignItems </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "start")</em>
</h3>

<p>Specifies the alignment of the items based on the largest one. The supported values are:</p>

<ul>
<li>
<code>"start"</code> - aligns the items to the start of the largest element.</li>
<li>
<code>"center"</code> - aligns the items to the center of the largest element.</li>
<li>
<code>"end"</code> - aligns the items to the end of the largest element.</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="surface" style="height: 300px;"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var Path = draw.Path;
  var rect = new Rect([200, 0], [300, 300]);
  var layout = new draw.Layout(rect, {
        alignItems: "center"
  });

  var pathA = Path.fromRect(new Rect([0, 0], [100, 100]));
  var pathB = Path.fromRect(new Rect([0, 0], [100, 50]));
  var pathC = Path.fromRect(new Rect([0, 0], [100, 70]));

  layout.append(pathA, pathB, pathC);
  layout.reflow();

  var surface = draw.Surface.create($("#surface"));
  surface.draw(layout);
  surface.draw(Path.fromRect(rect));
&lt;/script&gt;
</code></pre>

<h3 id="configuration-justifyContent">
<a href="#configuration-justifyContent">justifyContent </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "start")</em>
</h3>

<p>Specifies how should the content be justified. The supported values are:</p>

<ul>
<li>
<code>"start"</code> - aligns the items to the rectangle origin.</li>
<li>
<code>"center"</code> - aligns the items to the rectangle center.</li>
<li>
<code>"end"</code> - aligns the items to the rectangle end.</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="surface" style="height: 300px;"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var Path = draw.Path;
  var rect = new Rect([200, 0], [250, 300]);
  var pathRect = new Rect([0, 0], [100, 100]);
  var layout = new draw.Layout(rect, {
    justifyContent: "center"
  });

  var pathA = Path.fromRect(pathRect);
  var pathB = Path.fromRect(pathRect);
  var pathC = Path.fromRect(pathRect);

  layout.append(pathA, pathB, pathC);
  layout.reflow();

  var surface = draw.Surface.create($("#surface"));
  surface.draw(layout);
  surface.draw(Path.fromRect(rect));
&lt;/script&gt;
</code></pre>

<h3 id="configuration-lineSpacing">
<a href="#configuration-lineSpacing">lineSpacing </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>Specifies the distance between the lines for wrapped layout.</p>

<h4>Example</h4>

<pre><code>&lt;div id="surface" style="height: 300px;"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var Path = draw.Path;
  var rect = new Rect([200, 0], [250, 300]);
  var pathRect = new Rect([0, 0], [100, 100]);
  var layout = new draw.Layout(rect, {
    lineSpacing: 10
  });

  var pathA = Path.fromRect(pathRect);
  var pathB = Path.fromRect(pathRect);
  var pathC = Path.fromRect(pathRect);

  layout.append(pathA, pathB, pathC);
  layout.reflow();

  var surface = draw.Surface.create($("#surface"));
  surface.draw(layout);
  surface.draw(Path.fromRect(rect));
&lt;/script&gt;
</code></pre>

<h3 id="configuration-spacing">
<a href="#configuration-spacing">spacing </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>Specifies the distance between the elements.</p>

<h4>Example</h4>

<pre><code>&lt;div id="surface" style="height: 300px;"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var Path = draw.Path;
  var rect = new Rect([200, 0], [250, 300]);
  var pathRect = new Rect([0, 0], [100, 100]);
  var layout = new draw.Layout(rect, {
    spacing: 10
  });

  var pathA = Path.fromRect(pathRect);
  var pathB = Path.fromRect(pathRect);

  layout.append(pathA, pathB);
  layout.reflow();

  var surface = draw.Surface.create($("#surface"));
  surface.draw(layout);
  surface.draw(Path.fromRect(rect));
&lt;/script&gt;
</code></pre>

<h3 id="configuration-orientation">
<a href="#configuration-orientation">orientation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "horizontal")</em>
</h3>

<p>Specifies layout orientation. The supported values are:</p>

<ul>
<li>"horizontal" - the elements are arranged horizontally.</li>
<li>"vertical" - the elements are arranged vertically.</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="surface" style="height: 300px;"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var Path = draw.Path;
  var rect = new Rect([200, 0], [250, 300]);
  var pathRect = new Rect([0, 0], [100, 100]);
  var layout = new draw.Layout(rect, {
    orientation: "vertical"
  });

  var pathA = Path.fromRect(pathRect);
  var pathB = Path.fromRect(pathRect);

  layout.append(pathA, pathB);
  layout.reflow();

  var surface = draw.Surface.create($("#surface"));
  surface.draw(layout);
  surface.draw(Path.fromRect(rect));
&lt;/script&gt;
</code></pre>

<h3 id="configuration-wrap">
<a href="#configuration-wrap">wrap </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>Specifies the behavior when the elements size exceeds the rectangle size. If set to true, the elements will be moved to the next "line". If set to false, the layout will be scaled so that the elements fit in the rectangle.</p>

<h4>Example</h4>

<pre><code>&lt;div id="surface" style="height: 300px;"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var Path = draw.Path;
  var rect = new Rect([200, 0], [250, 300]);
  var pathRect = new Rect([0, 0], [100, 100]);
  var layout = new draw.Layout(rect, {
    wrap: false
  });

  var pathA = Path.fromRect(pathRect);
  var pathB = Path.fromRect(pathRect);
        var pathC = Path.fromRect(pathRect);
  layout.append(pathA, pathB, pathC);
  layout.reflow();

  var surface = draw.Surface.create($("#surface"));
  surface.draw(layout);
  surface.draw(Path.fromRect(rect));
&lt;/script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-rect"><a href="#methods-rect">rect</a></h3>

<p>Gets or sets the layout rectangle.</p>

<h4>Parameters</h4>

<h5>rect <a href="/api/javascript/geometry/rect" class="type-link"><code>kendo.geometry.Rect</code></a>
</h5>

<p>The layout rectangle.</p>

<h4>Returns</h4>

<p><a href="/api/javascript/geometry/rect" class="type-link"><code>kendo.geometry.Rect</code></a> The current rectangle.</p>

<h3 id="methods-reflow"><a href="#methods-reflow">reflow</a></h3>

<p>Arranges the elements based on the current options.</p> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

